<script setup>
import { ref } from "vue";
const val = ref("");
defineProps({
  placeholder: {
    type: String,
    default: "请输入",
  },
  modelValue: String,
});
//定义这个组件里面能使用哪些自定义事件
const emit = defineEmits(["enter", "update:modelValue"]);
const change = (e) => {
  // console.log(e, "");
  // 此时,创建并调用自定义事件
  emit("update:modelValue", e.target.value);
};
const enter = () => {
  //   console.log("callbak");
  emit("enter", val.value);
  val.value = "";
};
//
</script>
<template>
  <div class="input">
    <input
      @input="change($event)"
      v-model="val"
      type="text"
      :placeholder="placeholder"
      @keydown.enter="enter"
    />
  </div>
</template>

<style lang="scss" scoped>
.input {
  input {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid green;
    color: #898989;
  }
}
</style>
